var stats = new Stats(),
    sds = stats.domElement.style;
sds.position = 'absolute';
sds.top = '0px';
sds.right = '0px';
document.body.appendChild(stats.domElement);

var canvas = document.getElementById('c'),
    ctx = canvas.getContext('2d');

//随机函数
function randomRange(min, max) {
    var result = Math.random() * (max - min) + min;
    return result;
}

//粒子类
function Particle(x, y, r, vx, vy, color, alpha) {
    this.x = x || 0;
    this.y = y || 0;
    this.r = r || 10;
    this.vx = vx || 0;
    this.vy = vy || 0;
    this.color = color;
    this.alpha = alpha;
}
Particle.colorList = ['255, 255, 255', '255, 99, 71', '19, 19, 19'];
Particle.totalCount = 75;
Particle.radiusRange = [10, 35];
Particle.alphaRange = [.05, .5];
Particle.speedRange = [.05, .5];
Particle.partilces = [];
Particle.createParticle = function() {
    for(var i = 0; i < Particle.totalCount; i += 1) {
        Particle.partilces.push(new Particle(
            randomRange(0, canvas.width),
            randomRange(0, canvas.height),
            randomRange(Particle.radiusRange[0], Particle.radiusRange[1]),
            randomRange(Particle.speedRange[0], Particle.speedRange[1]),
            randomRange(Particle.speedRange[0], Particle.speedRange[1]),
            Particle.colorList[~~randomRange(0, Particle.colorList.length)],
            randomRange(Particle.alphaRange[0], Particle.alphaRange[1]),
        ))
    }
};
Particle.prototype.update = function(ctx, i) {
    this.x += this.vx;
    this.y += this.vy;
    if(this.x > canvas.width + this.r || this.y > canvas.height + this.r) {
        var random = Math.random();
        if(random > .5) {
            Particle.partilces[i].x = -Particle.partilces[i].r;
            Particle.partilces[i].y = randomRange(0, canvas.height);
        } else {
            Particle.partilces[i].x = randomRange(0, canvas.width);
            Particle.partilces[i].y = -Particle.partilces[i].r;
        }
        this.draw(ctx);
    } else {
        this.draw(ctx);
    }
}
Particle.prototype.draw = function(ctx) {
    var grd;
    ctx.save();
    ctx.fillStyle = 'rgba(' + this.color + ', ' + this.alpha + ')';
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
    ctx.closePath();
    ctx.fill();
    ctx.restore();

    ctx.save();
    grd = ctx.createRadialGradient(this.x, this.y, this.r, this.x, this.y, this.r * 1.25);
    grd.addColorStop(0, 'rgba(' + this.color + ', ' + this.alpha + ')');
    grd.addColorStop(1, 'rgba(34, 34, 34, 0)');
    ctx.fillStyle = grd;
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.r * 1.25, 0, Math.PI * 2, false);
    ctx.fill();
    ctx.restore();
}

//事件处理
window.addEventListener('resize', handleResize, false);
function handleResize() {
    canvas.width = window.innerWidth * window.devicePixelRatio;
    canvas.height = window.innerHeight * window.devicePixelRatio;
}
handleResize();
Particle.createParticle();

//动画函数
function animate() {
    requestAnimationFrame(animate);

    ctx.save();
    ctx.fillStyle = 'rgba(25, 25, 25, 1)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.restore();

    for(var i = 0; i < Particle.partilces.length; i += 1) {
        Particle.partilces[i].update(ctx, i);
    }

    stats.update();
}

animate();